<template>
  <div class="mFooter">
    <div class="fitem-wrap">
      <div class="fitem">
        <div class="fi-title">网站导航</div>
        <div class="fi-link">
          <a href="/">首页</a>
        </div>
        <div class="fi-link" v-for="(item,index) in fList0">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
        </div>
        <div class="fi-link">
          <a href="https://beian.miit.gov.cn/" target="_blank"
            >京ICP备2023028049号-1</a
          >
        </div>
      </div>
      <div class="fitem">
        <div class="fi-title">友情链接</div>
        <div class="fi-link" v-for="(item,index) in fList1">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
        </div>
      </div>
      <div class="fitem">
        <div class="fi-title">作者</div>
        <div class="fi-link" v-for="(item,index) in fList2">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
        </div>
      </div>
    </div>
    <div class="beian">
      
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
let fList0= ref([])
let fList1= ref([])
let fList2= ref([])
onMounted(()=>{
  // console.log('moyuTimeCommonData:',moyuTimeCommonData)
  if(moyuTimeCommonData){
    fList0.value = moyuTimeCommonData.footerUrls[0]
    fList1.value = moyuTimeCommonData.footerUrls[1]
    fList2.value = moyuTimeCommonData.footerUrls[2]
  }
  
})
</script>




<style lang="scss">
.mFooter {
  width: 100%;
  background: black;
  padding: 32px;
  color: white;
  box-sizing: border-box;

  .fitem-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .fitem {
      width: 33%;
      flex-shrink: 0;
      .fi-title {
        font-size: 16px;
        font-weight: bold;
        position: relative;
        padding: 15px 0;
      }
      .fi-link {
        margin-bottom: 4px;
        line-height: 16px;
        padding: 5px 0;
        font-size: 14px;
        color: #fff;
        a {
          color: white;
          opacity: 0.6;
        }
      }
    }
  }
}

@media screen and (max-width: 640px) {
  .mFooter {
    .fitem-wrap {
      .fitem {
        width: 50%;
      }
    }
  }
}
</style>
